<template>
  <div>
    <el-dialog
      title="添加成员"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="716px"
      :lock-scroll="false"
      @close="cancel"
    >
      <div class="form-box">

        <TableCompEle v-if="tableData.length>0" ref="multipleTable"
          v-loading="loading"
          :tableData="tableData"
          :isSelect="true" :isIndex="true" :isShowPage="true"
          :tableConfig="tableConfig"
          @getPagination="getPagination"
          @handleSelectionChange="handleSelectionChange"
        />
        <EmptyComp v-else class="m-t" containerH="20vh" :emptyConfig="emptyConfig" :showActions="false" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save()" v-if="tableData.length>0">确认</el-button>
        <el-button @click="cancel()">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { memberList, joinDepartment } from '@/api/department'
export default {
  name: 'BasisOrgsDialog',
  data() {
    return {
      dialogVisible: false,
      total: 0,
      pagination: {
        page: 1,
        size: 10
      },
      loading: false,
      tableData: [],
      tableConfig: [
        {
          prop: 'userName',
          label: '成员名称'
        },
        {
          prop: 'userRealName',
          label: '姓名'
        },
        {
          prop: 'departmentName',
          label: '所属部门'
        },
        {
          prop: 'createTime',
          label: '创建时间'
        }
      ],
      multipleSelection: [],
      department: {},
      emptyConfig: {
        title: "暂无可添加成员",
        imageSvg: "empty",
        width: "20vh",
        height: "20vh",
      },
    }
  },
  methods: {
    getPagination() {
      this.initData();
    },
    show(data) {
      this.department = data
      this.dialogVisible = true
      this.initData()
    },
    cancel() {
      this.total = 0
      this.pagination = {
        page: 1,
        size: 10
      }
      this.department = {}
      this.dialogVisible = false
      this.$parent.initUser()
      this.$parent.initTree()
    },
    save() {
      const userIds = []
      this.multipleSelection.forEach((item) => {
        userIds.push(item.userId)
      })
      const params = {
        userIds: userIds,
        departmentIds: [this.department.id]
      }
      joinDepartment(params).then(() => {
        this.cancel()
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    initData() {
      const params = {
        currentPage: this.pagination.page,
        pageSize: this.pagination.size,
        queryString: {
          userName: '',
          deptId: this.department.id
        }
      }
      memberList(params).then((res) => {
        this.tableData = res.rows
        this.total = res.total
        this.$refs.multipleTable.clearSelection()
      })
    },
    paginationSize() {
      this.pagination.page = 1
      this.initData()
    }
  }
}
</script>
<style lang="less" scoped></style>
